<!--  -->
<template>
  <!-- 砍价商品 -->
  <div class="bargain">
    <!-- 商品分类，商品搜索功能 -->
    <div class="shop">
      <!--   商品分类功能 -->
      <div class="classify">
        <span>砍价状态:</span>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link"
            >{{ selectTitle }}
            <i class="el-icon-arrow el-icon--right" />
          </span>
          <!-- 下拉 -->
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in selectDataList"
              :key="index"
              :command="item"
            >
              {{ item }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- 商品搜索功能 -->
      <div class="search">
        <span>商品搜索:</span>
        <el-input
          v-model="message"
          placeholder="请输入商品名称，关键字，商品ID"
          @change="searchInput"
        />
        <el-button type="info" size="mini" icon="el-icon-search" />
      </div>
    </div>
    <!-- 添加商品 -->
    <!-- <div class="addList">
      <el-button type="primary" class="addtn" @click="clickList">
        添加商品
      </el-button>
    </div> -->

    <!-- 表格 -->
    <el-table
      :data="
        selectList.length
          ? selectList
          : searchList.length
          ? searchList
          : bargainList
      "
      border
      style="width: 100%"
      max-height="600"
    >
      <el-table-column prop="id" label="ID" align="center" />
      <el-table-column label="砍价图片" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 30px; height: 30px"
            :src="scope.row.img"
            :preview-src-list="img"
          />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="砍价名称" align="center" />
      <el-table-column prop="price" label="砍价价格" align="center" />
      <el-table-column prop="lowestPrice" label="最低价" align="center" />
      <el-table-column prop="joinNum" label="参与人数" align="center" />
      <el-table-column prop="helpNum" label="帮忙砍价人数" align="center" />
      <el-table-column prop="successNum" label="砍价成功人数" align="center" />
      <el-table-column prop="num" label="限量" align="center" />
      <el-table-column prop="residueNum" label="限量剩余" align="center" />
      <el-table-column prop="helpNum" label="限量剩余" align="center" />
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.flag" />
        </template>
      </el-table-column>
      <el-table-column prop="time" label="操作时间" align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <!-- 编辑弹框 -->
          <el-button type="text" @click="editBtn(scope.row)">
            编辑
          </el-button>
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
          >
            <el-form
              ref="ruleForm"
              :model="ruleForm"
              :rules="rules"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="砍价名称" prop="title">
                <el-input v-model="ruleForm.title" />
              </el-form-item>
              <el-form-item label="砍价价格" prop="price">
                <el-input v-model="ruleForm.price" />
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="sureEditBtn('ruleForm')"
                >确 定</el-button
              >
            </span>
          </el-dialog>
          <!-- 删除 -->
          <el-button type="text" @click="delOpen(scope.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pageFun">
      <div />
      <!-- 分页 -->
      <!-- <el-pagination
        background
        :current-page="pageIndex"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="optionsSource[activeIndex].children.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      /> -->
    </div>
  </div>
</template>

<script>
import request from "../../../../utils/request2";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      bargainList: [],
      //编辑弹框初始状态
      dialogVisible: false,
      //编辑表单默认值
      ruleForm: {
        title: "",
        price: ""
      },
      //编辑规则
      rules: {
        title: [
          { required: true, message: "不能为空", trigger: "blur" },
          { min: 7, max: 20, message: "长度在 7 到 20 个字符", trigger: "blur" }
        ],
        price: [{ required: true, message: "不能为空", trigger: "blur" }]
      },
      //默认搜索状态
      message: "",
      //筛选后的搜索列表
      searchList: [],
      //选择器起始状态
      selectValue: "",
      //选择器数组
      selectDataList: ["关闭", "开启"],
      //下拉分类默认值
      selectTitle: "请选择",
      //筛选后的分类状态列表
      selectList: []
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //请求数据
    async getList() {
      const res = await request("/getBargainList");
      this.bargainList = res.data;
      this.setFlag();
    },
    //编辑弹框开关
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    //编辑功能
    editBtn(row) {
      this.dialogVisible = true;
      this.editIndex = row.id;
      this.ruleForm.title = row.title;
      this.ruleForm.price = row.price;
    },
    //编辑确认按钮
    sureEditBtn(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("编辑成功!");
          this.bargainList.forEach(item => {
            if (item.id === this.editIndex) {
              item.title = this.ruleForm.title;
              item.price = this.ruleForm.price;
              return item;
            }
          });
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
          this.dialogVisible = true;
          return false;
        }
      });
    },
    //删除按钮
    delOpen(index) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.delBargainrList(index);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //删除功能
    delBargainrList(index) {
      this.bargainList.splice(index, 1);
    },
    //双向绑定模糊搜索
    searchInput(e) {
      this.selectList = [];
      this.searchList = this.bargainList.filter(item => {
        return item.title.includes(e) || JSON.stringify(item.id) === e;
      });
    },
    //下拉分类切换
    handleCommand(command) {
      console.log(command);
      //清空searchList
      this.searchList = [];
      //改变下拉的标题
      this.selectTitle = command;
      //根据下拉标题寻找下标渲染列表
      this.selectList = this.bargainList.filter(item => {
        return item.type === command;
      });
    },
    //通过flag设置状态
    setFlag() {
      this.bargainList.forEach(item => {
        console.log(1);
        if (item.flag) {
          item.type = "开启";
        } else {
          item.type = "关闭";
        }
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
};
</script>
<style lang="scss" scoped>
.bargain {
  padding: 20px;
}
.shop {
  width: 80%;
  height: auto;
  display: flex;
  align-items: center;
  padding: 30px 0;
}
.classify {
  width: 15%;
  height: auto;
  align-items: center;
  margin-right: 20px;
}
.search {
  width: 30%;
  height: auto;
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.classify span,
.search span {
  width: 150px;
  margin-right: 15px;
}
.addList {
  margin-bottom: 50px;
}
</style>
